<template>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator=">">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>商品管理</el-breadcrumb-item>
    <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card class="box-card">
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <el-col :span="8">
            <el-input placeholder="请输入内容"
            v-model="queryInfo.query"
            clearable
            @clear="getGoodsList"
            >
                <template #append>
                <el-button @click="getGoodsList">
                    <el-icon><Search /></el-icon>
                </el-button>
                </template>
            </el-input>
        </el-col>
        
        <el-col :span="4">
            <el-button type="primary" @click="goAddPage">添加商品</el-button>
        </el-col>
      </el-row>

      <!-- table 表格区域 -->
      <el-table :data="goodslist" border stripe>
        <el-table-column type="index">
        </el-table-column>

        <el-table-column label="商品名称" prop="goods_name"></el-table-column>
        <el-table-column label="商品价格(元)" prop="goods_price" width="95px"></el-table-column>
        <el-table-column label="商品重量" prop="goods_weight" width="70px"></el-table-column>
        <el-table-column label="创建时间" prop="add_time" width="150px">
            <template #default="scope">
                {{ myFilter(scope.row.add_time) }}
            </template>
        </el-table-column>
        <el-table-column label="操作" width="130px">
            <template #default="scope">
                <el-button type="primary" size="small">
                    <el-icon><Edit /></el-icon>
                </el-button>
                <el-button type="danger" size="small"
                @click="removeById(scope.row.goods_id)">
                    <el-icon><Delete /></el-icon>
                </el-button>
            </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
      v-model:currentPage="queryInfo.pagenum"
      v-model:page-size="queryInfo.pagesize"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      />

    </el-card>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus'
export default {
    data() {
        return {
            // 查询参数对象
            queryInfo: {
                query: '',
                pagenum: 1,
                pagesize:10
            },

            goodslist: [],
            total: 0
        }
    },
    created() {
        this.getGoodsList()
    },
    methods: {
        // 根据分页获取对应商品列表
        async getGoodsList() {
            const {data: res} = await this.$http.get('goods', {
                params: this.queryInfo
            })

            if (res.meta.status !== 200){
                return this.$message.error('获取商品列表失败')
            }
            this.$message.success('获取商品列表成功')
            console.log(res.data)
            this.goodslist = res.data.goods
            this.total = res.data.total
        },


        // 时间戳 => 格式化
        myFilter(date) {
            if (date === 0 || date == null) {
                return ''
            }

            const dt = new Date(date)
            const y = dt.getFullYear()
            const m = (dt.getMonth() + 1 + '').padStart(2, '0')
            const d = (dt.getDate() + '').padStart(2, '0')
            const hh = (dt.getHours() + '').padStart(2, '0')
            const mm = (dt.getMinutes() + '').padStart(2, '0')
            const ss = (dt.getSeconds() + '').padStart(2, '0')

            return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
        },

        handleSizeChange(newSize) {
            this.queryInfo.pagesize = newSize
            this.getGoodsList()
        },

        handleCurrentChange(newPage) {
            this.queryInfo.pagenum = newPage
            this.getGoodsList()
        },

        // 按id删除
        async removeById(id) {
            await ElMessageBox.confirm(
            '将永久删除，是否继续',
            '警告',
            {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
            }).then(async () => {
            
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
            await this.$http.delete(`goods/${id}`)
            })
            .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
            })
            this.getGoodsList()
        },

        goAddPage() {
            this.$router.push('/goods/add')
        }
    },

    computed: {
    }
}
</script>

<style>

</style>